<template>
    <Component
        :is="_zxTag"
        class="zx-radio-group"
        role="radiogroup"
        @keydown="handleKeydown"
    >
        <slot />
    </Component>
</template>
<script>
import Emitter from '@src/mixins/emitter';

const keyCode = Object.freeze({
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40,
});
export default {
    name: 'ZxRadioGroup',

    componentName: 'ZxRadioGroup',

    inject: {
        zxFormItem: {
            default: '',
        },
    },

    mixins: [Emitter],

    props: {
        value: {},
        size: String,
        fill: String,
        textColor: String,
        disabled: Boolean,
    },

    computed: {
        _zxFormItemSize() {
            return (this.zxFormItem || {}).zxFormItemSize;
        },
        _zxTag() {
            return (this.$vnode.data || {}).tag || 'div';
        },
        radioGroupSize() {
            return this.size || this._zxFormItemSize || (this.$ELEMENT || {}).size;
        },
    },
    watch: {
        value(value) {
            this.dispatch('ZxFormItem', 'el.form.change', [this.value]);
        },
    },

    created() {
        this.$on('handleChange', value => {
            this.$emit('change', value);
        });
    },
    mounted() {
        // 当radioGroup没有默认选项时，第一个可以选中Tab导航
        const radios = this.$el.querySelectorAll('[type=radio]');
        const firstLabel = this.$el.querySelectorAll('[role=radio]')[0];
        if (![].some.call(radios, radio => radio.checked) && firstLabel) {
            firstLabel.tabIndex = 0;
        }
    },
    methods: {
        handleKeydown(e) { // 左右上下按键 可以在radio组内切换不同选项
            const target = e.target;
            const className = target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]';
            const radios = this.$el.querySelectorAll(className);
            const length = radios.length;
            const index = [].indexOf.call(radios, target);
            const roleRadios = this.$el.querySelectorAll('[role=radio]');
            switch (e.keyCode) {
                case keyCode.LEFT:
                case keyCode.UP:
                    e.stopPropagation();
                    e.preventDefault();
                    if (index === 0) {
                        roleRadios[length - 1].click();
                        roleRadios[length - 1].focus();
                    } else {
                        roleRadios[index - 1].click();
                        roleRadios[index - 1].focus();
                    }
                    break;
                case keyCode.RIGHT:
                case keyCode.DOWN:
                    if (index === (length - 1)) {
                        e.stopPropagation();
                        e.preventDefault();
                        roleRadios[0].click();
                        roleRadios[0].focus();
                    } else {
                        roleRadios[index + 1].click();
                        roleRadios[index + 1].focus();
                    }
                    break;
                default:
                    break;
            }
        },
    },
};
</script>
